<template>
  <m-page-wrapper>
    <m-crud ref="crudRef" :option="option">
    </m-crud>
  </m-page-wrapper>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { CrudType } from '/@/components/Crud/types';
const crudRef = ref()
const option = ref<CrudType>({
  // 弹窗类型
  // dialogType: 'drawer',
  // 弹窗属性
  dialogProps: {
    width: '60%',
    // 是否全屏
    fullscreen: true
  },
  // 标题
  title: '部门',
  // 列表接口
  api: '/sys/dept/tree',
  // 添加保存接口
  saveApi: '/sys/dept/save',
  // 添加保存接口
  updateApi: '/sys/dept/update',
  // 删除接口
  delApi: '/sys/dept/remove',
  // 添加的权限码
  addPerms: 'sys:dept:save',
  // 修改的权限码
  editPerms: 'sys:dept:update',
  // 查看的权限码
  viewPerms: 'sys:dept:detail',
  // 删除的权限码
  delPerms: 'sys:dept:remove',
  // 搜索表单查询按钮文本
  searchOkBtnText: '查询',
  // 搜索表单配置属性
  searchFormProps: {
    layout: 'inline'
  },
  addBtn: true, // 是否显示添加按钮
  // viewBtn: false,
  // editBtn: false,
  // delBtn: false,
  addBtnText: '新增', // 添加按钮
  viewBtnText: '查看',
  columns: [{
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
    list: false,
    add: false,
    component: "Input",
    componentProps: {
      type: 'hidden'
    }
  },{
    title: '上级部门',
    dataIndex: 'parentId',
    key: 'parentId',
    component: "TreeSelect",
    list: false,
    componentProps: {
      api: '/sys/dept/tree',
      immediate: false,
      // treeDataSimpleMode: {
      //   id: 'id',
      //   pId: 'parentId',
      // },
      fieldNames: {
        key: 'id',
        value: 'id',
        label: 'name'
      }
    }
  },{
  title: '部门名称',
  dataIndex: 'name',
  key: 'name',
  sorter: true,
  defaultSortOrder: 'ascend',
  search: true,
  searchType: "LIKE",
  searchDefaultValue: 'aaa',
  component: 'Input',
  componentProps: {
    allowClear: false,
  },
  searchColumnProps: {
    allowClear: true,
  },
  rules: [{ required: true, message: '请输入部门名称', trigger: 'blur' }]
},{
  title: '唯一编码',
  dataIndex: 'code',
  key: 'code',
  sorter: true,
  defaultSortOrder: 'ascend',
  search: true,
  searchType: "EQ",
  component: 'Input',
  rules: [{ required: true, message: '请输入唯一编码', trigger: 'blur' }]
},{
  title: '是否启用',
  dataIndex: 'enabled',
  key: 'enabled',
  component: 'Dict',
  search: true,
  searchType: "EQ",
  searchDefaultValue: 1,
  componentProps: {
    code: 'yes_no',
    style: {
      width: '100px'
    }
  },
  rules: [{ required: true, message: '请选择是否启用', trigger: 'blur' }]
}],
// tableProps: {
//   simple: {}
// },
formProps: {
  labelCol: { style: { width: '100px' } },
},
treeProps: {
  btnText: '子部门',
  btnPerms: 'sys:dept:save'
}
})
</script>
<style lang="less" scoped>

</style>